<template>
    <div>
        <!-- 部门选择 -->
        <a-select v-bind="$attrs" v-on="$listeners" :placeholder="placeholder" v-model="currentValue" allowClear>
            <a-spin v-if="fetching" slot="notFoundContent" size="small" />
            <a-select-option v-else v-for="i in department" :key="i.id" :value="i.id">{{ i.name }}</a-select-option>
        </a-select>
    </div>
</template>
<script>
import { getProjectInfo, getDepartmentList } from '@/api/businessAffairs/revenueAndCost'
export default {
    inheritAttrs: false,
    props: {
        // v-model绑定的数据
        value: {
            type: [Array, String, Object],
        },
        // 需要联动的表单名，
        form: {
            type: Object,
            default: function () {
                return {}
            },
        },
        placeholder: {
            type: String,
            default: function () {
                return '请选择'
            },
        },
        // 需要联动的表单名
        keyValue: {
            type: String,
            default: function () {
                return 'project'
            },
        },
        // 联动表单值改变时是否清空当前表单值
        isClear: {
            type: Boolean,
            default() {
                return false
            },
        },
        isObj: {
            type: Boolean,
            default() {
                return false
            },
        },
    },
    data() {
        return {
            fetching: false,
            department: [],
        }
    },
    methods: {
        getProjectInfo(params) {
            this.fetching = true
            let data = {
                projectId: params.query.branchComIds[0],
            }
            getProjectInfo(data).then((res) => {
                this.getDepartmentList(res.data.projectDeptOrgId)
            })
        },
        getDepartmentList(id) {
            let data = {
                id: id,
                type: '2',
            }
            getDepartmentList(data)
                .then((res) => {
                    this.fetching = false
                    if (res.status === 200) {
                        this.department = res.data;
                        if (this.$listeners['getList']) this.$emit('getList', this.department);
                    } else {
                        this.$message.error('err:', res.message)
                    }
                })
                .catch((res) => {
                    this.fetching = false
                })
        },
    },
    computed: {
        // 需要联动的表单值
        attr() {
            let attrValue
            const keys = this.keyValue.split('.')
            const findValueFromKeys = (data, key) => {
                if (data instanceof Object && keys.some(k => k === key)) {
                    return findValueFromKeys(data[key], keys[keys.findIndex(k => k === key) + 1])
                }
                return data
            }
            if (keys && !!keys.length) {
                attrValue = findValueFromKeys(this.form, keys[0])
            }
            return attrValue
            // // console.log(this.isObj)
            // if (this.isObj) {
            //     // this.form[this.keyValue]
            //     return this.form[this.keyValue]?.key
            // } else {
            //     return this.form[this.keyValue]
            // }
        },
        // 转换绑定的选中数据，与v-model同步
        currentValue: {
            get: function () {
                this.$emit('input', this.value)
                this.$emit('change', this.value)
                return this.value
            },
            set: function (value) {
                this.$emit('input', value)
                this.$emit('change', value)
            },
        },
    },
    mounted() {
        let val = this.attr
        // val && this.getProjectInfo({ query: { branchComIds: [val] } })
        val && this.getDepartmentList(val)
    },
    watch: {
        // 监听联动表单值重置项目列表
        attr(val) {
            // 清空表单
            if (this.isClear) {
                this.currentValue = ''
            }
            // 重置列表
            this.department = []
            val && this.getDepartmentList(val)
            // val && this.getProjectInfo({ query: { branchComIds: [val] } })
        },
    },
}
</script>
